<script setup lang="ts">
import {UpdateUserBasicInfoApi,getUserBasicInfoApi,UserBasicModel} from '~@/api/account'
import { notification} from 'ant-design-vue'
import { AvatarArray} from '~@/enums';
const bassUrl = import.meta.env.VITE_APP_BASE;
const formState = ref<UserBasicModel>({
    id: '',
    username: '',
    name: '',
    phone: '',
    avatar: ''
})
const isUpdate = ref(false)

const { t } = useI18n()

const formRef = ref()
const labelCol = { span: 0 }
const wrapperCol = { span: 13 }
const rules: any = computed(() => {
  return {
    name: [
          { required: true, message: '请输入昵称', trigger: 'change' },
    ],
    phone: [
        { required: true, message: '请输入电话号', trigger: 'change' },
    ],
  }
})
const avatarVisible = ref(false)

onMounted(async () => {
  return await basicInfo();
})
async function basicInfo() {
  let res: any;
  res = await getUserBasicInfoApi();
  
  if(res.data){
    formState.value = res.data;
    isUpdate.value = !!formState.value?.username
    console.log(formState.value);

    notification.success({message: '查询成功'});
  }else{
    notification.error({message: res.message??'查询失败'});
  }
}
async function onSubmit() {
    try {
        await formRef.value?.validate();
        let res: any;

        if(formState.value.id){
            res = await UpdateUserBasicInfoApi(formState.value);
        }else{
            res = await UpdateUserBasicInfoApi(formState.value);
        }
        if(res.data){
            notification.success({message: '保存成功'});     
            formState.value = res.data;
        }else{
            notification.error({message: res.message??'保存失败'});
        }
        basicInfo()
    }catch (errorInfo) {
        console.log('失败:', errorInfo);
    }
  
}

function handleChange() {
  console.log('change')
  avatarVisible.value= true
}
function handleAvatarOk(){

}
function handleCancel() {
  // formPasswordRef.value?.resetFields()
  // passwordVisible.value = false;
}
</script>

<template>
    <a-card :title="t('account.settings.basic-setting')" :bordered="false">
        <a-row>
            <a-col :span="12">
                <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-item :label-col="{ span: 24 }" label="用户名" name="username">
                        <a-input v-model:value="formState.username" placeholder="请输入" :disabled ="isUpdate" style="width: 320px;" />
                    </a-form-item>
                    <a-form-item :label-col="{ span: 24 }" label="真实姓名" name="name">
                        <a-input v-model:value="formState.name" placeholder="请输入" style="width: 320px;" />
                    </a-form-item>
                    <a-form-item :label-col="{ span: 24 }" label="联系电话" name="phone">
                        <a-input v-model:value="formState.phone" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" @click="onSubmit">
                            更新基本信息
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-col>
            <a-col :span="4">
                <p>
                    {{ t('account.settings.basic-avatar') }}
                </p>
                <div class="flex flex-col items-center">
                    <a-avatar :size="100">
                        <template #icon>
                            <img :src="bassUrl + formState.avatar" alt="">
                        </template>
                    </a-avatar>
                    <a-button class="mt-4"  @click="handleChange">
                        <!-- <UploadOutlined /> -->
                        修改头像
                    </a-button>
                </div>
            </a-col>
            <a-modal v-model:open="avatarVisible" title="修改头像" width="420px" :footer="null" :maskClosable="false">
                <div class="avatar">
                <a-radio-group v-model:value="formState.avatar"  button-style="solid">
                    <a-radio-button :value="item.value" v-for="(item, index) in AvatarArray" :key="index">
                    <a-avatar size="large" :src="item.payload.src"/>
                    </a-radio-button>
                </a-radio-group>
                </div>
            </a-modal>
        </a-row>
    </a-card>
</template>
<style scoped>

.avatar{
  :global(.ant-radio-button-wrapper) {
    height: 50px;
    padding:0px;
  }
} 
.avatar{
  :global(.ant-radio-button-wrapper) {
    border-radius: 25px !important;
    margin: 5px;
  }
  :global(.ant-radio-button-wrapper:not(:first-child)::before) {
    width: 0px !important;
  }
  :global(.ant-avatar-lg) {
    width: 50px;
    height: 50px;
  }
  
} 

</style>
